<template>
  <div>
    <div>
      <div class="header flex">
        <span>信息</span>
        <el-input
          class="input"
          clearable
          v-model="cartType"
          placeholder="岗位类型如:经理、员工"
        ></el-input>
        <el-button @click="cha()">查询</el-button>
        <el-button @click="clear()">重置</el-button>
        <!-- 弹框  新增-->
        <el-popover placement="top" width="560" v-model="visible">
          <p>
            <!-- 弹出框的内容 -->
            <el-form
              :model="ruleForm"
              :rules="rules"
              ref="ruleForm"
              label-width="100px"
              class="demo-ruleForm"
            >
              <el-form-item label="需求人数" prop="shu">
                <el-input v-model="ruleForm.shu"></el-input>
              </el-form-item>
              <el-form-item label="岗位类型" prop="cartType">
                <el-input v-model="ruleForm.cartType" placeholder="经理、员工"></el-input>
              </el-form-item>
              <!-- <el-form-item label="岗位类型" prop="cartType">
                <el-select v-model="ruleForm.cartType">
                  <el-option
                    v-for="item in options"
                    :key="item.value"
                    :label="item.name"
                    :value="item.value"
                  ></el-option>
                </el-select>
              </el-form-item> -->
              <!-- 学历 -->
              <el-form-item label="学历要求" prop="education">
                <el-input v-model="ruleForm.education" placeholder="大专、本科、研究生"></el-input>
              </el-form-item>
              <el-form-item label="工作年限" prop="age">
                <el-input v-model="ruleForm.age" placeholder="20"></el-input>
              </el-form-item>
              <el-form-item label="招聘要求" prop="ask" >
                <el-input v-model="ruleForm.ask" placeholder="有相关经验"></el-input>
              </el-form-item>

              <el-form-item label="招聘负责人" prop="job">
                <el-select v-model="ruleForm.job" placeholder="请选择活动区域">
                  <el-option
                    v-for="item in datapin"
                    :key="item.id"
                    :label="item.name"
                    :value="item.pp"
                  ></el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="需求负责人" prop="side">
                <el-select v-model="ruleForm.side">
                  <el-option
                    v-for="item in Demand"
                    :key="item.id"
                    :label="item.name"
                    :value="item.pp"
                  ></el-option>
                </el-select>
              </el-form-item>

              <el-form-item label="需求状态" prop="nee">
                <el-radio-group v-model="ruleForm.nee">
                  <el-radio v-model="ruleForm.nee" label="进行中"></el-radio>
                </el-radio-group>
              </el-form-item>··

              <el-form-item>
                <el-button type="primary" @click="submitForm(ruleForm)"
                  >立即创建</el-button
                >
                <el-button @click="resetForm('ruleForm')">重置</el-button>
              </el-form-item>
            </el-form>
          </p>
          <div style="text-align: right; margin: 0">
            <el-button size="mini" type="text" @click="visible = false"
              >取消</el-button
            >
            <el-button type="primary" size="mini" @click="visible = false"
              >确定</el-button
            >
          </div>
          <!-- 新增按钮 -->
          <el-button type="primary" slot="reference">新增</el-button>
        </el-popover>
      </div>
      <!-- 下面表格 -->
      <el-table
        ref="multipleTable"
        :data="tableData"
        tooltip-effect="dark"
        style="width: 100%"
        @selection-change="handleSelectionChange"
      >
        <!-- 点击按钮 -->
        <!-- <el-table-column type="selection" width="55"> </el-table-column> -->
        <!-- 需求人数 -->
        <el-table-column label="需求人数" width="120">
          <template slot-scope="scope">{{ scope.row.shu }}</template>
        </el-table-column>
        <el-table-column
          prop="cartType"
          label="岗位类型"
          width="120"
        ></el-table-column>
        <el-table-column
          prop="education"
          label="学历要求"
          show-overflow-tooltip
        ></el-table-column>
        <el-table-column label="工作年限" width="120">
          <template slot-scope="scope">{{ scope.row.age }}</template>
        </el-table-column>
        <el-table-column
          prop="ask"
          label="招聘要求"
          width="120"
        ></el-table-column>
        <el-table-column prop="job" label="招聘负责人" show-overflow-tooltip>
        </el-table-column>
        <el-table-column label="需求负责人" width="120">
          <template slot-scope="scope">{{ scope.row.side }}</template>
        </el-table-column>
        <el-table-column prop="nee" label="需求状态" width="120">
        </el-table-column>
        <el-table-column prop="time" label="发布时间" show-overflow-tooltip>
        </el-table-column>
        <el-table-column width="120" label="操作" show-overflow-tooltip>
          <template slot-scope="scope">
            <el-button
              type="text"
              size="small"
              @click="handleEdit(scope.$index, scope.row)"
              >编辑</el-button
            >
            <el-button
              type="text"
              size="small"
              @click="handleDelete(scope.$index, scope.row)"
              >删除</el-button
            >
          </template>
        </el-table-column>
      </el-table>
    </div>
    <!-- 修改内容 -->
    <el-dialog title="修改招聘需求" :visible.sync="dialogVisible2" width="50%">
      <!-- 表单 -->
      <el-form
        :model="form2"
        ref="form"
        label-width="100px"
        class="demo-ruleForm"
      >
        <!-- <el-form-item label="日期" prop="age">
          <el-date-picker
            v-model="form2.date"
            type="date"
            placeholder="选择日期"
            value-format="yyyy-MM-dd"
          >
          </el-date-picker>
        </el-form-item> -->
        <el-form-item label="需求人数" prop="name">
          <el-input v-model="form2.shu"></el-input>
        </el-form-item>
        <el-form-item label="岗位类型" prop="cartType">
          <el-input v-model="form2.cartType"></el-input>
        </el-form-item>
        <!-- <el-form-item label="岗位类型" prop="cartType">
          <el-select v-model="form2.cartType" placeholder="请选择活动区域">
            <el-option
              v-for="item in options"
              :key="item.id"
              :label="item.name"
              :value="item.value"
            ></el-option>
          </el-select>
        </el-form-item> -->
        <!-- 学历 -->
        <el-form-item label="学历要求" prop="education">
          <el-input v-model="form2.education"></el-input>
        </el-form-item>
        <el-form-item label="工作年限" prop="age">
          <el-input v-model="form2.age"></el-input>
        </el-form-item>
        <el-form-item label="招聘要求" prop="ask">
          <el-input v-model="form2.ask"></el-input>
        </el-form-item>
        <el-form-item label="招聘负责人" prop="job">
          <el-select v-model="form2.job" placeholder="请选择活动区域">
            <el-option
              v-for="item in datapin"
              :key="item.id"
              :label="item.name"
              :value="item.pp"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="需求负责人" prop="side">
          <el-select v-model="form2.side" placeholder="请选择活动区域">
            <el-option
              v-for="item in Demand"
              :key="item.id"
              :label="item.name"
              :value="item.pp"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="需求状态" prop="nee">
          <el-radio-group v-model="form2.nee">
            <el-radio label="进行中"></el-radio>
            <el-radio label="完成"></el-radio>
          </el-radio-group>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible2 = false">取 消</el-button>
        <el-button type="primary" @click="handleClose2(form2)">确 定</el-button>
      </span>
    </el-dialog>
    <Pagin :count="total" @pageEvent="fetchData" :pageSize="pageSize"></Pagin>
  </div>
</template>

<script>
import {
  needAPI,
  newaddedAPI,
  userListApi,
  xiuListAPI,
  DeleteAPI,
  chaListApi,
} from "@/api/3-1_needInfo";
// import {chaListApi} from '@/api/3-2_Interview.js'
export default {
  data() {
    return {
      dialogVisible2: false, //编辑
      form2: {},
      cartType: "", //查询 经理或者员工
      pp: "",
      datapin: [], //招聘负责人
      Demand: [], //需求负责人
      options: [{ value: "" }, { name: "" }],
      value: "",
      ruleForm: {
        shu: "",
        cartType: "",
        education: "",
        age: "",
        ask: "",
        job: "",
        side: "",
        nee: [],
        time: "",
        time: ""
      },
      total: 0, // 列表总行数
      pageSize: 10,
      currentPage: 1,
      rules: {},

      visible: false,
      tableData: [],
      dataList: [],
      multipleSelection: [],
    };
  },
  created() {
    this.needs(); //页面一刷新就获取页面的数据，并渲染该页面
    this.guans(); //人事小刘
    this.xuqius(); //需求负责人
  },
  components: {
    Pagin: () => import("c/Pagin"),
  },
  mounted() {},
  methods: {
    // 招聘负责人
    async guans() {
      // mock
      // var r = await chaListApi();
      // r.data.map((item,i)=>{
      //   item.value = item.name
      // })
      // this.options = r.name
      // console.log("面试官", r.name);
      // console.log('数组',this.options);
      // 接口
      var r = await chaListApi();
      r.data.forEach((item) => {
        // this.options.push({name:item.name,value:item.value});
        var obj = { pp: item, name: item };
        this.datapin.push(obj);
      });
      console.log("数组", this.datapin);
      console.log("数组单个", r.data[0]);
    },
    // 需求负责人
    async xuqius() {
      // mock
      // var r = await chaListApi();
      // r.data.map((item,i)=>{
      //   item.value = item.name
      // })
      // this.options = r.name
      // console.log("面试官", r.name);
      // console.log('数组',this.options);
      // 接口
      var r = await chaListApi();
      r.data.forEach((item) => {
        var obj = { pp: item, name: item };
        this.Demand.push(obj);
      });
      console.log("数组", this.datapin);
      console.log("数组单个", r.data[0]);
    },
    // 修改的弹框
    handleEdit(index, row) {
      this.dialogVisible2 = true;
      this.form2 = row;
      console.log(index, row);
    },
    // 修改内容
    async handleClose2() {
      const res = await xiuListAPI({
        // id: this.form2.id,
        shu: this.form2.shu,
        cartType: this.form2.cartType,
        education: this.form2.education,
        age: this.form2.age,
        ask: this.form2.ask,
        job: this.form2.job,
        side: this.form2.side,
        nee: this.form2.nee,
      });
      if (res.code == "1") {
        this.needs();
        this.$message.success("修改成功");
      }
      this.dialogVisible2 = false;
    },
    //删除
    async handleDelete(index, row) {
      const res = await DeleteAPI(row.id);
      console.log(res);
      this.dataList.splice(index, 1);
      this.fetchData(this.currentPage);
      this.total = this.dataList.length;
      this.$message.success("删除成功");
    },
    // 请求数据渲染页面
    async needs() {
      var res = await needAPI();
      this.dataList = res.data;
      this.total = this.dataList.length;
      this.fetchData(this.currentPage);
      console.log(res,'页面数据');
    },
    //分页
    fetchData(count) {
      var list = this.dataList;
      var from = (count - 1) * this.pageSize;
      const to = count * this.pageSize;
      this.tableData = [];
      for (; from < to; from++) {
        if (list[from]) {
          this.tableData.push(list[from]);
        }
      }
    },
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },
    // 添加数据
    async submitForm(form) {
      console.log(form);
      var res = await newaddedAPI({
        shu: form.shu,
        cartType: form.cartType,
        education: form.education,
        age: form.age,
        ask: form.ask,
        job: form.job,
        side: form.side,
        nee: form.nee,
      });
      if (res.code == "1") {
        // var obj = {
        //   shu: form.shu,
        //   cartType: form.cartType,
        //   education: form.education,
        //   age: form.age,
        //   ask: form.ask,
        //   job: form.job,
        //   side: form.side,
        //   nee: form.nee,
        // };
        this.visible = false;
        this.$message.success("添加成功");
        this.needs();
        // this.dataList.unshift(obj);
        // console.log(this.dataList, "k");
        // this.fetchData(this.currentPage);
        // this.total = this.dataList.length;
      }
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
    },
    // 查询
    async cha() {
      // var res = await userListApi({ cartType: this.cartType }); //mock
      var res = await userListApi(this.cartType); //接口调用
      var cartInfo = [];
      if (res.code == "1") {
        res.data.map((item, i) => {
          console.log(item, i);
          if (item.cartType == this.cartType) {
            // return item
            cartInfo.push(item);
          }
        });
        console.log("查询", res);
        //   this.dataList = res.data;
        this.dataList = cartInfo;
        this.total = this.dataList.length;
        this.fetchData(this.currentPage);
      } else {
        alert("未查询到结果！请检查接口");
      }
    },
    clear() {
      this.cartType = "";
      this.needs();
    },
  },
};
</script>
<style scoped lang="scss">
.flex {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.input {
  width: 120px;
}
.header {
  width: 40%;
  border-bottom: 1px solid #e0e0e0;
  padding: 20px 0;
}
</style>
